<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <h5>退回网点</h5>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <div style="text-align: center;font-size: 20px">
                                {{'今日退回: ' + this.output + '件' }}
                            </div>
                            <el-form ref="outForm"  :rules="createRule" :model="createParams">
                                <el-form-item style="width: 500px;margin:50px auto;" prop="single_number">
                                    <el-input size="large" style="margin:0px auto;display:block;font-size: 24px;width: 500px;" placeholder="请扫描条形码，或输入快递单号" v-model="createParams.single_number" ></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="warning" style="width:30%;margin:0 auto;display:block;background: rgba(248,154,55,1);font-size: 20px" @click="queryDelivery"> 确 定 </el-button>
                                </el-form-item>
                            </el-form>
                            <el-row :gutter="20">
                                <el-col :span="24" :xs="24" :sm="24" :lg="24">
                                    <el-table :data="outputData.data" style="width: 100%">
                                        <el-table-column
                                            prop="single_number"
                                            label="快递单号">
                                        </el-table-column>
                                        <el-table-column
                                            prop="network_name"
                                            label="网点">
                                        </el-table-column>
                                        <el-table-column
                                            prop="to_mobile"
                                            label="会员">
                                        </el-table-column>
                                        <el-table-column
                                            prop="created_at"
                                            label="时间">
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination @size-change="sizeChange" @current-change="currentChange"
                                                   style="text-align: right;margin-top: 20px;"
                                                   :current-page="outputData.page"
                                                   :page-sizes="[3, 5, 10, 20]"
                                                   :page-size="outputData.paginate"
                                                   layout="total, sizes, prev, pager, next, jumper"
                                                   :total="outputData.total">
                                    </el-pagination>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import api from '../apis'
    export default {
        name: "Back",
        data(){
            return {
                // 退件总数
                output: 0,
                createParams:{
                    single_number:'',
                },
                //入库请求验证规则
                createRule:{
                    single_number: [
                        { required: true, message: '请填写快递单号', trigger: 'blur' },
                    ],
                },
                //退件列表数据
                backData:{
                    page:1,
                    paginate:10,
                },
                outputData:{
                    data:[],
                    total:0,
                },
            };
        },
        methods:{
            queryDelivery(){
                this.$refs['outForm'].validate((valid) =>{
                    if(valid){
                        api.back.goback(this.createParams).then(response=>{
                            this.$message.success('退回成功');
                            this.$refs['outForm'].resetFields();
                            this.queryData();
                            this.queryOutput();
                        }).catch(errors=>{
                            this.$message.error(errors.response.data.resultMessage);
                        });
                    }else{
                        return false;
                    }
                });
            },
            currentChange(page){
                this.outputData.page = page;
                // console.log(page)
                this.queryData();
                this.queryOutput();
            },
            sizeChange(size){
                this.outputData.paginate = size;
                // console.log(size)
                this.queryData();
                this.queryOutput();
            },
            queryData(){
                api.back.backdata().then(response=>{
                    // console.log(response.data.data.output)
                    this.output = response.data.data.output;
                }).catch(errors=>{
                    this.$message.error(errors.response.data.resultMessage);
                });
            },
            queryOutput(){
                api.back.outputlist(this.backData).then(response=>{
                    // console.log(response.data.data)
                    this.outputData = response.data;
                    // this.output = response.data.data.output;
                }).catch(errors=>{
                    this.$message.error(errors.response.data.resultMessage);
                });
            },
        },
        mounted (){
            this.queryData();
            this.queryOutput();
        },
    }
</script>

<style lang="scss" scoped>
    .box-card{
        width: 50%;
        margin:0 auto;
    }

</style>
